<template>
  <router-view class="router-view" v-slot="{ Component }">
    <transition :name="isPageBack ? 'slide-right' : 'fade'">
      <!--      <keep-alive>-->
      <component :is="Component"/>
      <!--      </keep-alive>-->
    </transition>
  </router-view>
  <tabNav></tabNav>
</template>

<script>
import { onMounted, provide, computed, watch} from "vue";
import store from "@/store";


export default {
  name: "home",
  setup(props, {attrs, slots}) {
    let isPageBack = computed(() => {
      return store.state.common.isPageBack
    });

    watch(isPageBack, () => {

    })
    onMounted(() => {

    })
    return {
      isPageBack,
    };
  }
}


</script>

<style lang="less">
.fade-enter-active {
  opacity: 0;
  transition: all .3s;
}

.fade-enter-to {
  opacity: 1;
  transition: all .3s;
}

.fade-leave-active {
  opacity: 0;
  transition: all .3s;
}

.fade-leave-to {
  opacity: 1;
  transition: all .3s;
}


.slide-right-enter-active,
.slide-right-leave-active,
.slide-left-enter-active,
.slide-left-leave-active {
  height: 100vh;
  position: fixed !important;
  top: 0;
  backface-visibility: hidden;
}

.slide-right-enter, .slide-right-enter-active {
  animation: bounce-right-in 300ms;
}

.slide-right-leave-active {
  animation: bounce-right-out 300ms;

}

.slide-left-enter, .slide-left-enter-active {
  animation: bounce-left-in 300ms;
}

.slide-left-leave-active {
  animation: bounce-left-out 300ms;
}

@keyframes bounce-right-in {
  0% {
    transform: translate3d(100%, 0, 0);
  }
  100% {
    transform: translate3d(0, 0, 0);
  }
}

@keyframes bounce-right-out {
  0% {
    transform: translate3d(0, 0, 0);
  }
  100% {
    transform: translate3d(-100%, 0, 0);
  }
}

@keyframes bounce-left-in {
  0% {
    transform: translate3d(-100%, 0, 0);
  }
  100% {
    transform: translate3d(0px, 0, 0);
  }
}

@keyframes bounce-left-out {
  0% {
    transform: translate3d(0, 0, 0);
  }
  100% {
    transform: translate3d(100%, 0, 0);
  }
}
</style>
